<template>
    <div class="container">
        <p class="oneP">消费者分析</p>
        <p class="twoP" style="font-weight:100">全方位、多角度的分析消费者行为</p>
        <button class="oneButton" @click="$router.push({path:'/regist'})">立即注册</button>
        <ul class="ul1">
            <li v-for="(item,index) in arr1" :key="index"  @mouseover="show(index)">
                <div :class="{bg:index==liIndex,nobg:index!=liIndex}">
                    <img :src="item[0]" :class="{opa:liIndex==index}">
                    <img :src="item[1]">
                    <img v-if="liIndex==index" src="../../assets/img/lyzw/10.png" alt="" class="matte">
                    <div :class="{initialmask: index!==liIndex}"></div>
                </div>
                <div :class="{border:index==liIndex}">
                    <img src="../../assets/img/1微信小程序/切图/9.png">
                    <p>{{item[2]}}</p>
                    <p>{{item[3]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/lyzw/8.png")
const img2 = require("../../assets/img/lyzw/12.png")
const img3 = require("../../assets/img/lyzw/14.png")
const img4 = require("../../assets/img/lyzw/16.png")
const img6 = require("../../assets/img/lyzw/9.png")
const img7 = require("../../assets/img/lyzw/11.png")
const img8 = require("../../assets/img/lyzw/13.png")
const img9 = require("../../assets/img/lyzw/15.png")
const img10 = require("../../assets/img/切图/婚纱摄影行业/美辰婚纱营销优势/10.png")
export default {
    data(){
        return {
            arr1:[
                [img1,img6,"线上消费份额增加大部分游客通","过在线旅游网站购买景区门票"],
                [img2,img7,"旅游用户出游常态化，景区游览频","次增加"],
                [img3,img8,"大量游客在景区游玩，经常会产生","额外消费"],
                [img4,img9,"生活水平提高，购买力增加，特色","的出航路线更受游客喜爱"],
            ],
            liIndex:0
        }
    },
    methods:{
        show(index){
            this.liIndex = index
        }
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin: 0 auto;
    margin-top: 80px;
    overflow: hidden;
    text-align: center;
}
.ul1{
    overflow: hidden;
    margin-top: 60px;
    padding:7px;
}
.ul1>li{
    width:270px;
    text-align: center;
    float: left;
    position: relative;
    margin-left: 35px;
    box-shadow: 2px 2px 16px #ebebeb;
}
.ul1>li:first-child{
    margin-left: 0;
}
.ul1>li>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    z-index:3;
    top:68px;
    left:39%;
}
.ul1>li>div:nth-child(1)>img:nth-child(1){
    position: absolute;
    left:0px;
    z-index:1;
    
}
.ul1>li>div:nth-child(2){
    height:100px;
    margin-top:180px;
}
.ul1>li>div:nth-child(2)>img:nth-child(1){
    /* position: absolute; */
    margin-top: 30px;
}
.ul1>li>div:nth-child(2)>p:nth-child(2){
    margin-top: 10px;
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.ul1>li>div:nth-child(2)>p:nth-child(3){
    font-size: 16px;
    color:rgb(34, 34, 34);
    margin-bottom: 45px;
}
.border{
    border:1px solid red;
    border-top: none;
}
.opa{
    opacity:0.8 ;
}
.oneButton{
    width: 140px;
    box-shadow: 0px 4px 19px #ed9191;
}
.matte{
    position:absolute;
    height:180px;
    width:270px;
    z-index:2;
    top:0px;
    left:0px;
}

.initialmask {
    position: absolute;
    background-color: #000;
    opacity: 0.6;
    left: 0;
    top: 0;
    right: 0;
    bottom: 100px;
    display:block;
    z-index: 2;
}
</style>
